<template>
  <d2-container class="role-content">
    <div class="role-page-form">
      <el-form ref="roleForm" label-position="top" :rules="rules" :model="roleForm" size="default">
        <el-row :gutter="20">
          <el-col :span="7">
            <el-input placeholder="请输入内容" v-model="roleForm.name" class="">
              <template slot="prepend">名称</template>
            </el-input>
          </el-col>
          <el-col :span="7">
            <el-input placeholder="请输入内容" v-model="roleForm.status" class="">
              <template slot="prepend">状态</template>
            </el-input>
          </el-col>
          <el-col :span="3">
            <el-button @click="submit" type="primary" class="button-user" icon="el-icon-search">查询</el-button>
          </el-col>
          <el-col :span="3">
            <el-button @click="reset" type="primary" class="button-user"><i class="fa fa-repeat" aria-hidden="true"></i> 重置</el-button>
          </el-col>
          <el-col :span="3">
            <el-button @click="addRoleShow" type="primary" class="button-user" icon="el-icon-edit">新增</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-progress :percentage="100"></el-progress>
    </div>
    <div>
      <d2-crud
        :columns="columns"
        :data="roleInfo"
        :rowHandle="rowHandle"
        :options="options"
        :loading="loading"
        @custom-emit-1="handleCustomEvent"
        @custom-emit-2="handleCustomEvent2"
        @custom-emit-3="handleCustomEvent3"/>
    </div>
    <el-dialog
      title="角色信息"
      :visible.sync="dialogVisible"
      width="600px">
      <el-row :gutter="10" style="margin: -20px 0px -10px 0px;">
        <div>
          <el-form ref="roleFormData" label-position="top" :rules="rules" :model="roleFormData" size="default">
            <el-form-item prop="parentId">
              <el-input type="text" v-model="roleFormData.name" placeholder="角色名称">
                <i slot="prepend" class="fa fa-hand-o-right"></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="title">
              <el-input type="text" v-model="roleFormData.remarks" placeholder="备注">
                <i slot="prepend" class="fa fa-hand-o-right"></i>
              </el-input>
            </el-form-item>
            <el-button size="default" @click="postRoleData" type="primary" class="button-login">提交</el-button>
          </el-form>
        </div>
      </el-row>
    </el-dialog>
  </d2-container>
</template>

<script>
import MyTag from '../component/MyTag'
import { loadAllRole, addRole } from '@api/sys.role'
export default {
  components: {
    MyTag
  },
  data () {
    return {
      dialogVisible: false,
      roleForm: {
        userName: '',
        phone: ''
      },
      rules: {},
      roleInfo: [],
      columns: [
        { title: 'ID', key: 'id', width: 60 },
        { title: '角色名', key: 'name', width: 160 },
        { title: '备注', key: 'remarks' },
        { title: '状态', key: 'status', component: { name: MyTag } }
      ],
      roleFormData: {},
      loading: false,
      options: {
        border: true,
        stripe: true
      },
      rowHandle: {
        custom: [
          {
            text: '编辑',
            type: 'warning',
            size: 'small',
            emit: 'custom-emit-1'
          },
          {
            text: '查看分类',
            type: 'success',
            size: 'small',
            emit: 'custom-emit-2'
          },
          {
            text: '删除',
            type: 'danger',
            size: 'small',
            emit: 'custom-emit-3'
          }
        ]
      }
    }
  },
  methods: {
    handleCustomEvent ({ index, row }) {
      this.roleFormData.id = row.id
      this.roleFormData.name = row.name
      this.roleFormData.status = row.status
      this.roleFormData.remarks = row.remarks
      this.dialogVisible = true
    },
    handleCustomEvent2 ({ index, row }) {
      console.info(row)
    },
    handleCustomEvent3 ({ index, row }) {
      console.info(row)
    },
    submit () {
      this.loadData()
    },
    loadData () {
      let vm = this
      this.loading = true
      loadAllRole(this.roleForm).then(res => {
        vm.roleInfo = res
        this.loading = false
      }).catch(err => {
        console.info(err)
      })
    },
    addRoleShow () {
      this.roleFormData = {}
      this.dialogVisible = true
    },
    postRoleData () {
      let vm = this
      addRole(this.roleFormData).then(res => {
        vm.dialogVisible = false
        vm.loadData()
      }).catch(err => {
        console.info(err)
      })
    },
    reset () {
      this.roleForm = {}
    }
  },
  mounted () {
    this.loadData()
  }
}
</script>

<style lang="scss">
.user-info-content {
  @extend %unable-select;
  $backgroundColor: #F0F2F5;
  // ---
  .role-page-form {
    font-size: 14px;
    backgroundColor: #e5e9f2;
    .button-user{
      width: 100%;
    }
  }
}
</style>
